<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码生成器</title>
    <!-- 引入 Element UI 的 CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 highlight.js 的 CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
    <style>
        .custom-input {
            width: 400px; /* 可以根据需要调整宽度 */
        }
    </style>
    <style>
        .copy-btn {
            position: absolute;
            right: 10px;
            top: 10px;
            padding: 5px 10px;
            background-color: #409EFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .copy-btn:hover {
            background-color: #66B1FF;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
</head>
<body>
<!-- 引入 Element UI 的 JS -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入 axios 用于发送 HTTP 请求 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入 highlight.js 的 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<!-- 引入 highlightjs-line-numbers 的 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<div id="app">
    <!-- 添加查询条件表单 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="表名">
            <el-input v-model="searchForm.tableName" placeholder="请输入表名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="fetchData">查询</el-button>
        </el-form-item>
    </el-form>
    <!-- 添加查询历史显示区域 -->
    <div>
        <span style="margin-right: 10px;">查询历史:</span>
        <el-tag
                v-for="(item, index) in searchHistory"
                :key="index"
                closable
                @close="removeHistory(index)"
                @click="quickSearch(item)"
        >
            {{ item }}
        </el-tag>
    </div>

    <!-- 添加自定义参数 -->
    <!-- 修改布局，每行展示 3 个输入框，按钮独立一行 -->
    <!-- 确保 el-form-item 嵌套在 el-form 中 -->
    <el-form :inline="false" :model="searchForm" class="demo-form-inline">
        <!-- 添加查询历史显示区域 -->
        <el-form-item label="查询历史">
            <el-tag
                    v-for="(item, index) in searchHistory"
                    :key="index"
                    closable
                    @close="removeHistory(index)"
            >
                {{ item }}
            </el-tag>
        </el-form-item>
        <!-- 添加自定义参数 -->
        <el-row>
            <el-col :span="8">
                <el-form-item label="controller包名" label-width="120px">
                    <el-input class="custom-input" v-model="searchForm.controllerPackage"
                              placeholder="请输入controller包名"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="service包名" label-width="120px">
                    <el-input class="custom-input" v-model="searchForm.servicePackage"
                              placeholder="请输入service包名"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="serviceImpl包名" label-width="120px">
                    <el-input class="custom-input" v-model="searchForm.serviceImplPackage"
                              placeholder="请输入serviceImpl包名"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item label="mapper包名" label-width="120px">
                    <el-input class="custom-input" v-model="searchForm.mapperPackage"
                              placeholder="请输入mapper包名"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="mapper.xml包名" label-width="120px">
                    <el-input class="custom-input" v-model="searchForm.mapperXmlPackage"
                              placeholder="请输入mapper.xml包名"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="model包名" label-width="120px">
                    <el-input class="custom-input" v-model="searchForm.modelPackage"
                              placeholder="请输入model包名"></el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="8">
                <el-form-item label="表名" label-width="120px">
                    <el-input class="custom-input" v-model="searchForm.tableName"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="备注" label-width="120px">
                    <el-input class="custom-input" v-model="searchForm.comments"></el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <el-form-item style="text-align: right;">
                    <el-button type="primary" @click="saveParams">保存</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>


    <el-tabs v-model="activeTab">
        <el-tab-pane label="controller" name="controller">
            <div style="position: relative;">
                <pre><code id="controllerCode">{{ controllerData }}</code></pre>
                <button class="copy-btn" data-clipboard-target="#controllerCode">复制</button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="service" name="service">
            <div style="position: relative;">
                <pre><code id="serviceCode">{{ serviceData }}</code></pre>
                <button class="copy-btn" data-clipboard-target="#serviceCode">复制</button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="serviceimpl" name="serviceimpl">
            <div style="position: relative;">
                <pre><code id="serviceImplCode">{{ serviceImplData }}</code></pre>
                <button class="copy-btn" data-clipboard-target="#serviceImplCode">复制</button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="mapper" name="mapper">
            <div style="position: relative;">
                <pre><code id="mapperCode">{{ mapperData }}</code></pre>
                <button class="copy-btn" data-clipboard-target="#mapperCode">复制</button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="mapper.xml" name="mapperXml">
            <div style="position: relative;">
                <pre><code id="mapperXmlCode">{{ mapperXmlData }}</code></pre>
                <button class="copy-btn" data-clipboard-target="#mapperXmlCode">复制</button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="model" name="model">
            <div style="position: relative;">
                <pre><code id="modelCode">{{ modelData }}</code></pre>
                <button class="copy-btn" data-clipboard-target="#modelCode">复制</button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="tableInfo" name="tableInfo">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="fieldName" label="列名"></el-table-column>
                <el-table-column prop="fieldComment" label="字段备注"></el-table-column>
                <el-table-column prop="javaType" label="列的数据类型"></el-table-column>
                <el-table-column prop="DATA_LENGTH" label="列的长度"></el-table-column>
                <el-table-column prop="DATA_PRECISION" label="精度"></el-table-column>
                <el-table-column prop="DATA_SCALE" label="小数点位数"></el-table-column>
                <el-table-column prop="IS_PRIMARY_KEY" label="主键"></el-table-column>
                <el-table-column prop="javaType" label="JAVA类型"></el-table-column>
                <el-table-column prop="jdbcType" label="Mybatis类型"></el-table-column>
                <el-table-column prop="NULLABLE" label="是否可以为空"></el-table-column>
                <el-table-column prop="propertyName" label="propertyName"></el-table-column>
            </el-table>
        </el-tab-pane>
    </el-tabs>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            activeTab: 'controller',
            controllerData: '',
            serviceData: '',
            serviceImplData: '',
            mapperData: '',
            mapperXmlData: '',
            modelData: '',
            // 添加查询表单数据
            searchForm: {
                dataSource: '',
                tableName: 'S_DZYH_YHD_000003',
                // 添加自定义参数
                controllerPackage: '',
                servicePackage: '',
                serviceImplPackage: '',
                mapperPackage: '',
                mapperXmlPackage: '',
                modelPackage: ''
            },
            dataSourceOptions: [],
            tableData: [],
            searchHistory: [] // 添加查询历史数组
        },
        mounted() {
            new ClipboardJS('.copy-btn');
        },
        methods: {
            fetchData() {
                if (this.searchForm.tableName) {
                    // 去重处理
                    const index = this.searchHistory.indexOf(this.searchForm.tableName);
                    if (index !== -1) {
                        this.searchHistory.splice(index, 1);
                    }
                    // 添加到历史记录
                    this.searchHistory.unshift(this.searchForm.tableName);
                    // 限制最多显示 10 条
                    if (this.searchHistory.length > 10) {
                        this.searchHistory.pop();
                    }
                }

                this.modelData = null;
                this.mapperData = null;
                this.mapperXmlData = null;
                this.serviceData = null;
                this.serviceImplData = null;
                this.controllerData = null;

                fetch(`/gencode/generate?timestamp=${new Date().getTime()}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(this.searchForm)
                })
                    .then(response => {
                        return response.json();
                    })
                    .then(data => {
                        this.modelData = data.model;
                        this.mapperData = data.mapper;
                        this.mapperXmlData = data.mapperXml;
                        this.serviceData = data.service;
                        this.serviceImplData = data.serviceImpl;
                        this.controllerData = data.controller;

                        this.searchForm.tableName = data.tableInfo.tableName;
                        this.searchForm.comments = data.tableInfo.comment;

                        this.searchForm.controllerPackage = data.packageName.controller;
                        this.searchForm.serviceImplPackage = data.packageName.serviceImpl;
                        this.searchForm.servicePackage = data.packageName.service;
                        this.searchForm.mapperPackage = data.packageName.mapper;
                        this.searchForm.mapperXmlPackage = data.packageName.mapper;
                        this.searchForm.modelPackage = data.packageName.model;
                        this.tableData = data.columnInfos;
                        // 数据加载完成后调用代码高亮方法
                        this.$nextTick(() => {
                            document.querySelectorAll('pre code').forEach((block) => {
                                hljs.highlightBlock(block);
                                // 调用 highlightjs-line-numbers 插件
                            hljs.lineNumbersBlock(block);
                            });
                        });
                    })
                    .catch(error => {
                        console.error('请求出错:', error);
                    });
            },
            // 添加保存方法
            saveParams() {
                // 这里可以添加保存参数的逻辑，例如发送请求到后端
                console.log('保存的参数:', this.searchForm);
            },
            removeHistory(index) {
                this.searchHistory.splice(index, 1);
            },
            // 添加快速查询方法
            quickSearch(tableName) {
                this.searchForm.tableName = tableName;
                this.fetchData();
            },
        }
    });
</script>
</body>
</html>